<template>
  <view class="tabsBottom">
    <view class="tabs2">
      <view :class="['tabs2Item', state.tabId === item.id ? 'tabs2ItemHover' : '']" v-for="(item,index) in tabs6" :key="index" @click="changeTab(item)">
        {{item?.label}}
      </view>
    </view>
    <view class="msgBottom">
      <view :class="['msgItem', item?.type == 2 ? 'msgItemWen' : '']" v-for="(item, index) in state.newMsgInfo" :key="index">
        <view class="itemLeft">
          <view class="span">{{item?.count}}</view>
          <view class="title">{{item?.order_no}}</view>
        </view>
        <view class="itemMiddle">
          {{item?.name}}
        </view>
        <view class="itemRight">
          <view class="btn" @click="goToDetail(item)">查看</view>
          <view class="subBtn" v-if="item.type == 1">工</view>
          <view class="subBtn" v-else-if="item.type == 2">文</view>
        </view> 
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, reactive, watch} from 'vue'
  import { tabs6 } from '../data.js'
  import { onShow }  from '@dcloudio/uni-app'
  import { adminMessageList, adminSendMsg } from '@/utils/admin.js'
  const emits = defineEmits(['getList'])
  const props = defineProps({
    listInfo: {
      type: Object,
      default: () =>  {}
    }
  }) 
 
  watch(
    () => props.listInfo,
    () => {
      if (props.listInfo) {
        state.newMsgInfo = props.listInfo
      }
    }
  )
 
  const state = reactive({
    tabId: 1,
    newMsgInfo: []
  })
  

  const changeTab = (item) => {
    state.tabId = item?.id
    emits('getList', {type: item.id})
  }
  // 跳转详情页
  const goToDetail = (item) => {
    uni.navigateTo({
      url:`/pages/admin/msgDetail?itemInfo=${JSON.stringify(item)}&tabId=${state.tabId}`
    })
  }
</script>

<style lang="scss" scoped>
  .tabsBottom{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30rpx;
    width: 714rpx;
    .tabs2{
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: 100%;
      border-bottom: 2rpx solid rgba(65, 65, 65, 1);
      padding-bottom:30rpx;
      .tabs2Item{
        width: 156rpx;
        height: 48rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 6rpx;
        border: 2rpx solid rgba(107, 107, 107, 1); 
        font-family: HarmonyOS Sans SC;
        font-weight: 400;
        font-size: 24rpx;
        color: rgba(122, 122, 122, 1);
        margin-left: 30rpx;
        margin-right: 30rpx;
      }
      .tabs2ItemHover{
        border: 2rpx solid rgba(11, 105, 218, 1);
        background: rgba(209, 218, 243, 1);
        color: rgba(11, 105, 218, 1);
      }
    }
    .msgBottom{
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      .msgItem{
        width: 650rpx;
        height: 40rpx;
        padding-top: 10rpx;
        padding-bottom: 10rpx;
        border-radius: 6rpx;
        background: rgba(209, 243, 241, 1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20rpx;
        .itemLeft{
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          margin-left: 30rpx;
          .span{
            width: 26rpx;
            height: 26rpx;
            border-radius: 100%;
            background: rgba(255, 11, 11, 1);
            font-family: HarmonyOS Sans SC;
            font-weight: 400;
            font-size: 20rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 20rpx;
            color: #ffffff;
          }
          .title{
            width: 116rpx;
            height: 22rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
            line-height: 22rpx;
            font-family: HarmonyOS Sans SC;
            font-weight: 400;
            font-size: 20rpx;
            color: rgba(60, 60, 60, 1);
          }
        }
        .itemMiddle{
          width: 236rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: center;
          line-height: 22rpx;
          font-family: HarmonyOS Sans SC;
          font-weight: 400;
          font-size: 20rpx;
        }
        .itemRight{
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          margin-right: 30rpx;
          .btn{
            width: 72rpx;
            height: 32rpx;
            border-radius: 10rpx;
            background: rgba(135, 255, 124, 1);
            font-family: HarmonyOS Sans SC;
            font-weight: 400;
            font-size: 24rpx;
            margin-right:20rpx;
          }
          .subBtn{
            width: 42rpx;
            height: 22rpx;
            border-radius: 6rpx;
            border: 1px solid rgba(107, 107, 107, 1);
            color: rgba(107, 107, 107, 1);
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: HarmonyOS Sans SC;
            font-weight: 400;
            font-size: 16rpx;
          }
        }
      }
      .msgItemWen{
        background: rgba(243, 227, 209, 1);
      }
    }
  }
</style>